<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <title>Hackthon</title>
    <script src="libs/jquery-3.2.1.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'></script>
    <script src='js/data.js'></script>
    <script src='js/main.js'></script>

    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet'/>

</head>
<body>
<div class="frame">
    <div class="frame-body" id="frameWallet">
        <img src="/img/frame_wallet.png" width="100%"/>
    </div>
    <div class="frame-body">
        <div id='map' style='width: 100%; height: 100%;'></div>
        <div id="btnAttach"></div>
        <div id="btnFriends"></div>
        <div id="Me">
            <div class="mask"></div>
            <div class="head"></div>
            <div class="name">
                昵称大黄
            </div>
            <div class="level">
                Lv22
            </div>
            <div class="score">
                50000
            </div>
        </div>
    </div>
    <div class="frame-footer">
        <div class="tabs">
            <div class="tab-item active" id="tabGame">
                <img src="/img/icon_game.png" class="normal"/>
                <img src="/img/icon_game_hover.png" class="active"/>
            </div>
            <div class="tab-item" id="tabWallet">
                <img src="/img/icon_wallet.png" class="normal"/>
                <img src="/img/icon_wallet_hover.png" class="active"/>
            </div>
            <div class="tab-item" id="tabFriends">
                <img src="/img/icon_friends.png" class="normal"/>
                <img src="/img/icon_friends.png" class="active"/>
            </div>
            <div class="tab-item" id="tabMe">
                <img src="/img/icon_profile.png" class="normal"/>
                <img src="/img/icon_profile.png" class="active"/>
            </div>
        </div>
    </div>
    <div id="friendsPanel">
        <div class="header">可能认识的人</div>
        <img id="btnCloseFriends" src="/img/btn_close.png"></img>
        <div class="items">
            <div class="item">
                <div class="icon"><img src="/img/user_3.png" /></div>
                <div class="name">张雨生</div>
                <div class="distance">2.5 KM</div>
                <div class="action">
                    <img src="/img/btn_invite_friend.png"/>
                </div>
            </div>
            <div class="item">
                <div class="icon"><img src="/img/user_4.png" /></div>
                <div class="name">陈坤</div>
                <div class="distance">4.8 KM</div>
                <div class="action">
                    <img src="/img/btn_invite_friend.png"/>
                </div>
            </div>
            <div class="item">
                <div class="icon"><img src="/img/user_5.png" /></div>
                <div class="name">王丽坤</div>
                <div class="distance">8.3 KM</div>
                <div class="action">
                    <img src="/img/btn_invite_friend.png"/>
                </div>
            </div>
            <div class="item">
                <div class="icon"><img src="/img/user_6.png" /></div>
                <div class="name">彭于晏</div>
                <div class="distance">10.3 KM</div>
                <div class="action">
                    <img src="/img/btn_invite_friend.png"/>
                </div>
            </div>
        </div>
    </div>

    <div id="dropList" class="dialog">
        <img src="/img/mock_drop.png"/>
    </div>
    <div id="resultList" class="dialog">
        <img src="/img/mock_result.png"/>
    </div>
    <div id="qrcodeList" class="dialog" style="opacity:1">
        <img src="/img/qr.png"/>
    </div>
</div>
</body>
</html>